<template>
  <div class="addoutsource">
    <el-dialog
      title="新建外协工厂"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose"
    >
      <el-form ref="formRef" :model="form" label-width="120px">
        <el-form-item label="外协工厂名称">
          <el-input v-model="form.name" placeholder="请填写" />
        </el-form-item>
        <el-form-item label="对应工厂">
          <el-select v-model="form.outsource" placeholder="">
            <el-option label="" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="" label-width="120px">
          <!-- <el-select v-model="form.outsource1" placeholder="产品大类">
            <el-option label="" value=""></el-option>
          </el-select> -->
          <el-row :gutter="20">
            <el-col :span="5">
              <el-input
                v-model="form.outsource"
                placeholder="产品大类"
              />
            </el-col>
            <el-col :span="5">
              <el-input
                v-model="form.outsource"
                placeholder="二级分类"
              />
            </el-col>
            <el-col :span="5">
              <el-input
                v-model="form.outsource"
                placeholder="三级分类"
              />
            </el-col>
          </el-row>
        </el-form-item>
        <!-- <el-form-item label="产品分类一" label-width="200px">
          <el-select v-model="form.outsource1" placeholder="">
            <el-option label="" value=""></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label-width="120px">
          <el-table :data="form.data">
            <el-table-column label="外协车间" />
            <el-table-column label="工序" />
            <el-table-column label="设备名称" />
            <el-table-column label="可用台数" />
            <el-table-column label="日产能/件" />
            <el-table-column label="日工作时间" />
            <el-table-column label="工序工时s/件" />
            <el-table-column label="操作">
              <el-button type="text">保存</el-button>
              <el-button type="text" class="denger">删除</el-button>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      form: {}
    }
  },
  watch: {
    value(val) {
      if (val && val !== this.dialogVisible) {
        this.dialogVisible = val
        if (val) {
          //   this.selectRows = {}
          //   this.$refs?.table?.$refs?.myTable.setCurrentRow()
        }
      }
    },
    dialogVisible(val) {
      this.$emit('input', val)
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/element-variables.scss";
.addoutsource {
  width: 100%;
}
.denger {
  color: $--color-danger;
}
</style>
